<template>
    <div class="con">
        <div class="diskInfoWrap">
            <div class="head">
                <p class="colCLas"></p>
                <p class="info">交易流水开票</p>
            </div>
        </div>

        <el-form
            :model="$store.state.flowInvoice.flowForm"
            size="small"
            label-width="100px"
            class="formInline"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label="业务状态：">
                        <selectCom
                            v-model="$store.state.flowInvoice.flowForm.issqyw"
                            style="width: 100%"
                            :options="ywztList"
                        ></selectCom>
                    </el-form-item>

                </el-col>
                <el-col :span="6">
                    <el-form-item label="险种简称：">
                        <el-input
                            v-model="$store.state.flowInvoice.flowForm.xzjc"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="证件类型：" label-width="170px">
                        <selectCom
                            v-model="$store.state.flowInvoice.flowForm.zjlx"
                            style="width: 100%"
                            :options="
                                zjlxList
                            "
                        ></selectCom>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="是否个人业务：">
                        <selectCom
                            v-model="$store.state.flowInvoice.flowForm.isgryw"
                            style="width: 100%"
                            :options="sfgrywList"
                        ></selectCom>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="获票人名称：">
                        <el-input
                            v-model="$store.state.flowInvoice.flowForm.kfhm"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="投保单号：">
                        <el-input
                            v-model="$store.state.flowInvoice.flowForm.tbdh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="交易日期：" label-width="170px">
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="changeDate"
                            value-format="yyyy-MM-dd"
                            :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                    </el-form-item>

                </el-col>

            </el-row>

            <el-row>
                <el-col :span="6">
                    <el-form-item label="学平险受理号：">
                        <el-input
                            v-model="$store.state.flowInvoice.flowForm.xpxslh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="来源系统：">
                        <selectCom
                            v-model="$store.state.flowInvoice.flowForm.sjly"
                            style="width: 100%"
                            :options="lyxtList"
                            >
                        ></selectCom>
                    </el-form-item>
                </el-col>



                <el-col :span="8">
                    <el-form-item label="保单号/保全号/定期结算号：" label-width="170px">
                        <el-input
                            v-model="$store.state.flowInvoice.flowForm.ywbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="4">
                    <div style="float: right">
                        <el-button size="small" type="primary" @click="onSubmit">
                            查询
                        </el-button>
                        <el-button size="small" type="primary" @click="onSubmit('reset')">
                            重置
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import selectCom from './selectComp.vue'
import { ywztList,zjlxList, lyxtList,sfgrywList } from './flowForm.js'
import { nextMonthLastDay, getPreDay } from '@/utils/getTime.js'

export default {
    data() {
        return {
            ywztList,zjlxList, lyxtList,sfgrywList,
            dateRange: ['', ''],
            pickerOptions:{
                disabledDate:(time)=>{
                    if(this.$store.state.flowInvoice.flowForm.endTime){
                        let re = getPreDay(this.$store.state.flowInvoice.flowForm.endTime);
                        console.log(re);
                        return re> time.getTime()
                    }
                    return false
                }
            },
 
        }
    },

    methods:{
        changeDate(date){
            if(date === null){
                this.dateRange = ['','']
            }else if((new Date(date[1]).getTime() - new Date(date[0]).getTime() ) >= 1000*60*60*24*60){
                this.$message.error('请选择60天以内的日期范围')
                this.dateRange = ['','']
            }else{
                this.$store.commit('flowInvoice/ChangeFLowForm',{
                    ...this.$store.state.flowInvoice.flowForm,
                    startTime: date[0],
                    endTime: date[1],
                })
            }
        },
        onSubmit(type){
            if(type == 'reset'){
                this.$store.commit('flowInvoice/reset')
            }else{
                this.$store.dispatch('flowInvoice/getList')
            }
        },
    },
    components:{
        selectCom
    }
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.con{
    ::v-deep .el-form-item--small.el-form-item{
        margin-bottom: 6px;
    }

    .diskInfoWrap {
        box-sizing: border-box;
        .head {
            display: flex;
            height: 18px;
            align-items: center;
            margin-bottom: 12px;
            .colCLas {
                width: 4px;
                height: 100%;
                background-color: $allBg;
                margin-right: 12px;
            }
            .info {
                height: 100%;
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>





